<!--
 * @Description: 
 * @Author: william
 * @Date: 2024-08-22 09:48:09
 * @LastEditors: william
 * @LastEditTime: 2025-07-09 09:06:27
-->
<template>
  <view @click.stop class="nw-button-wrap">
    <up-button
      class="nw-button"
      :type="type"
      :size="size"
      :loading="loading"
      :loadingText="loadingText"
      :text="text"
      :="$attrs"
      @click="handleBtnClick"
    ></up-button>
  </view>
</template>

<script setup>
defineOptions({
  name: 'Button',
  inheritAttrs: false
})

const props = defineProps({
  type: {
    type: String,
    default: 'primary'
  },
  size: {
    type: String,
    default: 'normal' // large,normal,small,mini
  },
  loading: {
    type: Boolean,
    default: false
  },
  loadingText: {
    type: String,
    default: g_t('public.loading')
  },
  text: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['click'])

const handleBtnClick = _ => {
  emit('click')
}
</script>

<style lang="scss" scoped>
.nw-button {
  flex-shrink: 0;
  width: auto;
  background-color: var(--main-theme);
  border-color: var(--main-theme);
  box-sizing: border-box;
  &.u-button--large {
    height: 50 * 2rpx;
    padding: 0 30rpx;
    :deep(.u-button__text) {
      font-size: 32rpx !important;
    }
  }
  &.u-button--normal {
    height: 40 * 2rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
    :deep(.u-button__text) {
      font-size: 28rpx !important;
    }
  }
  &.u-button--small {
    height: 30 * 2rpx;
    padding: 0 16rpx;
    box-sizing: border-box;
    :deep(.u-button__text) {
      font-size: 24rpx !important;
    }
  }
  &.u-button--mini {
    height: 18 * 2rpx;
    padding: 0 10rpx;
    box-sizing: border-box;
    :deep(.u-button__text) {
      font-size: 18rpx !important;
    }
  }
  :deep(.u-button__text) {
    color: var(--color-fff);
  }
  &.u-button--disabled {
    background-color: var(--disabled-color);
    border-color: var(--disabled-color);
    opacity: 1 !important;
    :deep(.u-button__text) {
      color: var(--color-fff);
    }
  }
}
</style>
